<!DOCTYPE HTML>
<html>
<!-- 首页 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>友洗环保</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style media="screen">
        .head-back {
            width: 100%;
            height: 202px;
            background-image: url(../image/head-back.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            top: -30px;
            position: absolute;
        }

        .card {
            width: 92%;
            border-radius: 6px;
            box-shadow: 0px 0px 10px #e5e5e5;
            margin: 0 auto;
            position: relative;
        }

        .avatar {
            top: 0px;
            left: 8%;
            width: 80px;
            height: 80px;
            position: absolute;
            z-index: 100;
        }

        .icon {
            width: 30px;
            margin-left: 38%;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            color: #969696;
            text-align: center;
        }

        .t-badge {
            display: inline-block;
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            top: 0.3rem;
            right: 20%;
            z-index: 99;
        }
    </style>
</head>

<body style="background: white">
    <div id="app">
        <div class="head-back"></div>
        <div class="avatar">
            <div class="t-badge" style="margin: 40px -15px 0px 0px">
                <img :src="star">
            </div>
            <img v-show="info.headimgurl != ''" :src="info.headimgurl" class="aui-img-round aui-list-img-sm">
            <img v-show="info.headimgurl == ''" src="../image/logo.png" class="aui-img-round aui-list-img-sm">
        </div>
        <div class="aui-content aui-margin-t-15 card" style="top: 15px;">
            <ul class="aui-list aui-media-list">
                <div class="aui-media-list-item-inner">
                    <div v-show="info.headimgurl != ''" class="aui-list-item-inner" style="margin-left: 30%;">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-12" style="color: #666666;">技师等级</div>
                            <div class="aui-list-item-title aui-font-size-12" style="color: #666666;">账户总营业额</div>
                        </div>
                        <div class="aui-list-item-text" style="font-size: 26px; color: #333333;">
                            <div class="aui-list-item-title aui-font-size-16">{{starName}}</div>
                            <div class="aui-list-item-title aui-font-size-16" style="color: #00C6A7;">{{allturnover}}</div>
                        </div>
                    </div>
                    <div v-show="info.headimgurl == ''" class="aui-list-item-inner" style="margin-left: 90px;margin-bottom: 30px">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">
                                <div class="aui-btn" style="background-color: #fff; color: #00C6A7;" @click="init">
                                    还未登陆，点击登陆。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section class="aui-content aui-grid">
                    <div class="aui-row">
                        <div class="aui-col-xs-4" style="padding: 0">
                            <div class="aui-gird-lable aui-font-size-12" style="color: #666666;">今日订单</div>
                            <big class="aui-text-warning" style="font-size: 24px;">{{todayquantity}}</big>
                        </div>
                        <div class="aui-col-xs-4" style="padding: 0">
                            <div class="aui-gird-lable aui-font-size-12">今日营业额</div>
                            <big class="aui-text-warning" style="font-size: 24px;">{{todayturnover}}</big>
                        </div>
                        <div class="aui-col-xs-4" style="padding: 0">
                            <div class="aui-gird-lable aui-font-size-12">本月累计金额</div>
                            <big class="aui-text-warning" style="font-size: 24px;">{{curData.due}}</big>
                        </div>
                    </div>
                </section>
            </ul>
        </div>
        <section class="aui-grid aui-margin-t-15 card" style="top: 15px;">
            <div class="aui-row">
                <div class="aui-col-xs-4" @click="goToSupplementphoto">
                    <img src="../image/tophoto.png" class="icon">
                    <div class="aui-grid-label">补传照片</div>
                </div>
            </div>
        </section>
        <section class="aui-grid aui-margin-t-15 card" style="top: 15px;">
            <div style="padding-top:6px;padding-left:10px;color: #00C6A7;">技师排行榜 TOP3</div>
            <div class="aui-card-list-content" style="padding: 0px 5px 0px 5px">
                <ul class="aui-list aui-list-noborder">
                    <li class="aui-list-item" v-for="(technician, index) in rankingList">
                        <div class="aui-card-list-header aui-card-list-user" style="padding: 10px 5px">
                            <div class="aui-card-list-user-avatar" style="width: 20px; margin-top: 5px"><img style="width: 100%" :src="`../image/ranking/p` + (index+1) + `.png`"> </div>
                            <div class="aui-card-list-user-name">
                                <div class="aui-font-size-16" style="padding-right:5px;"> - <i class="aui-iconfont  aui-font-size-12"></i></div>
                                <div class="aui-card-list-user-avatar" style="width: 23px; margin-top: 2px"> <img class="aui-img-round aui-list-img-sm" style="width: 100%" src="../image/head.png"> </div>
                                <span style="color: #666666;"> {{technician.name}}</span>
                            </div>
                        </div>
                        <div class="aui-list-item-right aui-font-size-16 aui-text-warning" style="margin-top: 10px">{{technician.due}}</div>
                    </li>
                </ul>
            </div>
            <div style="padding-top:6px;padding-left:10px;">技师倒数排行榜</div>
            <div class="aui-card-list-content" style="padding: 0px 5px 0px 5px">
                <ul class="aui-list aui-list-noborder">
                    <li class="aui-list-item" v-for="(technician, index) in countdownList">
                        <div class="aui-card-list-header aui-card-list-user" style="padding: 10px 5px">
                            <div class="aui-card-list-user-avatar" style="width: 20px; margin-top: 5px"> <img style="width: 100%" :src="`../image/ranking/d` + (index+1) + `.png`"> </div>
                            <div class="aui-card-list-user-name">
                                <div class="aui-font-size-16" style="padding-right:5px;"> - <i class="aui-iconfont  aui-font-size-12"></i></div>
                                <div class="aui-card-list-user-avatar" style="width: 23px; margin-top: 2px"> <img class="aui-img-round aui-list-img-sm" style="width: 100%" src="../image/head.png"> </div>
                                <span style="color: #666666;"> {{technician.name}}</span>
                            </div>
                        </div>
                        <div class="aui-list-item-right aui-font-size-16" style="margin-top: 10px;color: #666666;">{{technician.due}}</div>
                    </li>
                </ul>
            </div>
        </section>
        <section class="aui-grid aui-margin-t-15 card" style="top: 15px;">
            <div class="aui-font-size-16" style="text-align:center; color: #666666;">当前版本：{{vsersion}}</div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common/api.js"></script>
<script type="text/javascript" src="../script/common/vue.js"></script>
<script type="text/javascript" src="../script/my/technician.js"></script>
<script type="text/javascript">
    apiready = function() {
        //显示加载缓冲页面
        api.showProgress({
        });
        technician.init(); //初始化获取头像、昵称等信息
        api.parseTapmode();
        //监听订单完成事件刷新页面
        api.addEventListener({
            name: 'orderover'
        }, function(ret, err) {
            window.location.reload();
        });
    }

    change_menu = function(index) {
        api.setFrameGroupIndex({
            name: 'IndexGroup',
            index: index,
            reload: true
        });
    }
</script>

</html>
